<template>
  <div class="haiyan1">
    <div style="margin: 0 auto;width: 100px;text-align: center;">
      <img src="./imgs/1.png" style="width: 87px;height: 83px;" />
      <br>
      <span class="text">人气商品</span>
    </div>
        <div class="box">
          <div class="box1" v-for="jfd in goodList.slice(0,8)" >
            <img :src="jfd.img_url" class="image" width="390" height="320" @click="gotoDetail(jfd)">
            <div style="text-align: center;margin-top: 20px"><span style="font-weight: bold">{{jfd.goods_name}}</span>{{jfd.details}}</div>
            <div style="text-align: center">￥{{jfd.pice}}</div>
          </div>
        </div>
  </div>
</template>
<script>
import {popularizeGoodsApi} from '@/api/zhy_port/demo'
export default {
  name: "zxc",
  components: {},
  data() {
    return{
      goodList:[],
      currentDate: new Date()
    };
  },
  methods:{
    gotoDetail(row){
      this.$router.push({
        path:'/detail',
        name:'detail',
        query: {dialogInfo: JSON.stringify(row)}
      });
    },
    popularDetail(){
      popularizeGoodsApi(1,8).then(req =>{
        console.log(req.data.content)
        this.goodList=req.data.content;
      })
    }
  },
  created() {
    this.popularDetail();
  },
}
</script>

<style lang="scss" scoped>
.haiyan1{
  margin: 0 auto;
  width: 1200px;
  float: left;
  .text {
    font-family: '黑体';
    font-size: 25px;
  }
  .box{
    width:100%;
    margin:0 auto;
    /*margin-top: 20px;*/
    .box1{
      width:290px;
      height: 410px;
      margin: 4px;
      float: left;
    }
    .image {
      width: 100%;
      display: block;
    }
  }
}


</style>
